<template>
  <div class="pagination-container">
    <el-pagination
      v-model:current-page="pagination.currentPage"
      v-model:page-size="pagination.pageSize"
      :page-sizes="[10, 20, 50, 100]"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper"
      background
      @current-change="emitPageChange"
      @size-change="emitSizeChange"
    />
  </div>
</template>

<script setup>
const props = defineProps({
  pagination: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['page-change', 'size-change'])

const emitPageChange = (page) => {
  emit('page-change', page)
}

const emitSizeChange = (size) => {
  emit('size-change', size)
}
</script>

<style scoped>
.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>